<template>
  <div style="background-color: rgba(255, 255, 255, 1); height: 100%">

    <div class="form-page" v-if="selectType === 0">
      <div style="height: auto">
        <Card :bordered="false" :dis-hover="true" :padding="5" >
          <b slot="title" style="color: #666;">
        <span
          class="iconfont icon-changyongtubiao-xianxingdaochu-zhuanqu-"
          style="font-size: 20px;"
        ></span> 基本信息
          </b>

          <div>
            <b class="label-left">
              维修进度:
            </b>
            <div
              style="width: 40%;
            float: left;
            color: #ff9900;
            border: 1px #ECEFF4 solid;
            line-height: 40px;
            text-indent: 4em;
            text-align: left;"
            >
              {{bloc.model.state === "0" ? '已取消'
              :bloc.model.state === "1" ? '待分配'
              :bloc.model.state === "2" ? '已分配'
              :bloc.model.state === '3' ? '已流转'
              :'已完成'}}
            </div>
            <b class="label-left">
              购买日期:
            </b>
            <div class="label-right">
              {{bloc.model.buyTime}}
            </div>
          </div>
          <div>
            <b class="label-left">
              申请时间:
            </b>
            <div class="label-left1">
              {{bloc.model.applyTime}}
            </div>
            <b class="label-left">
              联系人:
            </b>
            <div class="label-right">
              {{bloc.model.name}}
            </div>
          </div>
          <div>
            <b class="label-left">
              设备型号:
            </b>
            <div class='label-left1'>
              <Input v-model="bloc.model.PM" style="width:80%;left: -17%"/>
            </div>
            <b class="label-left">
              联系电话:
            </b>
            <div class="label-right">
              {{bloc.model.phone}}
            </div>
          </div>
          <div>
            <b class="label-left">
              设备序列号:
            </b>
            <div class='label-left1'>
              <Input v-model="bloc.model.SN" style="width:80%;left: -17%"/>
            </div>
            <b class="label-left">
              联系地址:
            </b>
            <div class="label-right">
              {{bloc.model.address}}
            </div>
          </div>
          <div>
            <b class="label-left">
              售后单号:
            </b>
            <div class='label-left1'>
              {{bloc.model.ordernum}}
            </div>
            <b class="label-left">
              维修人员:
            </b>
            <div class="label-right">
              {{bloc.model.workname===''?'(未分配)':bloc.model.workname}}
            </div>
          </div>

          <div v-if="bloc.model.ProModel===null">
            <b class="label-left">
              故障信息:
            </b>
            <div class="label-left1" style="width: 90%">
              <p>{{bloc.model.describe}}</p>
            </div>
          </div>
          <div style="display: inline-flex" v-if="bloc.model.ProModel===null">
            <b class="label-left">
              故障类别:
            </b>
            <FaultSelector @change="labelChange" :PId="parseInt(bloc.model.id)" style="width: 80%"></FaultSelector>
            <div style="margin: 5px 0px 5px 5px;">
              <Button
                ref="save"
                type="primary"
                @click="addModel()"
              >保存
              </Button>
            </div>

          </div>
          <div style="display: inline-flex" v-if="bloc.loading && bloc.model.ProModel===null">
            <b class="label-left">
              新增类别:
            </b>
            <Input v-model="bloc.AddSelectOption" style="width:80%;" :placeholder="'请输入以,分隔的'+bloc.num+'个值'" class="label-right-input"/>
          </div>
          <div v-if="bloc.model.ProModel!==null">
            <b class="label-left">
              安装数量:
            </b>
            <div class="label-left1" style="width: 90%">
              <p>{{bloc.model.Count}}</p>
            </div>
          </div>
        </Card>
      </div>
      <Card :bordered="false" :dis-hover="true" :padding="10" v-if="bloc.model.ProModel===null">
        <b slot="title" style="color: #666;">
        <span
          class="iconfont icon-changyongtubiao-xianxingdaochu-zhuanqu-"
          style="font-size: 20px;"
        ></span> 维保凭证
        </b>
        <div style="text-align: left">
          <div class="demo-upload-list" v-for="(item, index) in fileList" :key="ind(item,index)" style="left: 0">
            <template v-if="item.status1 === 'finished'">
              <img :src="item.imageurl">
              <div class="demo-upload-list-cover">
                <Icon type="ios-eye-outline" @click.native="handleView(item.imageurl)"></Icon>
              </div>
            </template>
            <Upload :action="'null'">
              <Modal title="View Image" v-model="visible" :width="wid">
                <img :src="imgUrl" v-if="visible">
              </Modal>
              <Modal title="View Image" v-model="visible1" :width="wid">
                <img :src="imgUrl" v-if="visible1" :width ="wid1">
              </Modal>

            </Upload>
          </div>
          <div class="demo-upload-list" v-for="(item, index) in videoList" :key="ind(item,index)" style="left: 0">
            <template v-if="item.status1 === 'finished'">
              <video
                height="300"
                width="400"
                controls
                :src="item.videourl"></video>
            </template>
          </div>
        </div>
      </Card>
      <div v-if="bloc.numRecord1 !== 0">
        <Card :bordered="false" :dis-hover="true" :padding="5" >
          <b slot="title" style="color: #666;">
        <span
          class="iconfont icon-changyongtubiao-xianxingdaochu-zhuanqu-"
          style="font-size: 20px;"
        ></span> 配件使用详情
          </b>

          <div class="list-page">
            <Row>
              <Table
                border
                :loading="bloc.loading"
                :columns="columns1"
                highlight-row
                :data="bloc.paged1.items"
              >
                <slot name="footer" slot="footer">
                  <Page
                    show-elevator
                    show-total
                    show-sizer
                    :total="bloc.paged1.itemCount"
                    :current="bloc.paged1.pageIndex"
                    :page-size="bloc.paged1.pageSize"
                    :page-size-opts="[15, 30, 50, 100]"
                    @on-change="(val) => bloc.load(val, bloc.paged1.pageSize)"
                    @on-page-size-change="(val) => bloc.load(bloc.paged1.pageIndex, val)"
                  />
                </slot>
              </Table>
            </Row>
          </div>
        </Card>
      </div>
      <div style="margin-top: auto" v-if="bloc.hasFormInfo !== 1 && bloc.numRecord1 !== 0">
        <Card :bordered="false" :dis-hover="true" :padding="10">
          <b slot="title" style="color: #666;">
        <span
          class="iconfont icon-changyongtubiao-xianxingdaochu-zhuanqu-"
          style="font-size: 20px;"
        ></span> 维修图片视频
          </b>
          <div style="text-align: left">
            <div class="demo-upload-list" v-for="(item, index) in fileListRecord" :key="ind(item,index)" style="left: 0">
              <template v-if="item.status1 === 'finished'">
                <div>{{item.name}}</div>
                <img :src="item.imageurl" :alt="item.name">

                <div class="demo-upload-list-cover" style="padding-top: 137px">
                  <Icon type="ios-eye-outline" @click.native="handleView(item.imageurl)"></Icon>
                </div>
              </template>
              <Upload :action="'null'">
                <Modal title="View Image" v-model="visible" :width="wid">
                  <img :src="imgUrl" v-if="visible">
                </Modal>
                <Modal title="View Image" v-model="visible1" :width="wid">
                  <img :src="imgUrl" v-if="visible1" :width ="wid1">
                </Modal>

              </Upload>
            </div>
            <div class="demo-upload-list" v-for="(item, index) in videoListRecord" :key="ind(item,index)" style="left: 0">
              <template v-if="item.status1 === 'finished'">
                <div>{{item.name}}</div>
                <video
                  height="300"
                  width="400"
                  controls
                  :src="item.videourl"></video>
              </template>
            </div>
          </div>
        </Card>
      </div>
      <div style="height: auto" v-if="bloc.numRecord2 !== 0">
        <Card :bordered="false" :dis-hover="true" :padding="5" >
          <b slot="title" style="color: #666;">
        <span
          class="iconfont icon-changyongtubiao-xianxingdaochu-zhuanqu-"
          style="font-size: 20px;"
        ></span> 维修评价
          </b>
          <div>
            <b class="label-left">
              总体星级:
            </b>
            <div class="label-left1"
                 style="color: #F56C6C;font-size: 25px;font-weight: normal"
            >
              {{bloc.shuchu(bloc.model2.Star)}}
            </div>
            <b class="label-left">
              专业星级:
            </b>
            <div class="label-right"
                 style="color: #F56C6C;font-size: 25px;font-weight: normal"
            >
              {{bloc.shuchu(bloc.model2.Speciality)}}
            </div>
          </div>
          <div>
            <b class="label-left">
              态度星级:
            </b>
            <div class="label-left1"
                 style="color: #F56C6C;font-size: 25px;font-weight: normal"
            >
              {{bloc.shuchu(bloc.model2.Attitude)}}
            </div>
            <b class="label-left">
              形象星级:
            </b>
            <div class="label-right"
                 style="color: #F56C6C;font-size: 25px;font-weight: normal"
            >
              {{bloc.shuchu(bloc.model2.Clothing)}}
            </div>
          </div>
          <div>
            <b class="label-left">
              耗时星级:
            </b>
            <div class="label-left1"
                 style="color: #F56C6C;font-size: 25px;font-weight: normal"
            >
              {{bloc.shuchu(bloc.model2.Times)}}
            </div>
            <b class="label-left">
              评价时间:
            </b>
            <div class="label-right" style="text-indent: 7em">
              {{bloc.model2.SubmitTime}}
            </div>
          </div>
          <div>
            <b class="label-left2">
              评价:
            </b>
            <div class="label-right-text2">
              <p>{{bloc.model2.Comment}}</p>
            </div>
          </div>
        </Card>
      </div>
      <div style="margin-top: auto" v-if="bloc.hasFormInfoRecord2 !== 1 && bloc.numRecord2 !== 0">
        <Card :bordered="false" :dis-hover="true" :padding="10">
          <b slot="title" style="color: #666;">
        <span
          class="iconfont icon-changyongtubiao-xianxingdaochu-zhuanqu-"
          style="font-size: 20px;"
        ></span> 评价图片
          </b>
          <div style="text-align: left">
            <div class="demo-upload-list" v-for="(item, index) in fileListRecord2" :key="ind(item,index)" style="left: 0">
              <template v-if="item.status1 === 'finished'">
                <img :src="item.imageurl">
                <div class="demo-upload-list-cover">
                  <Icon type="ios-eye-outline" @click.native="handleView(item.imageurl)"></Icon>
                </div>
              </template>
              <Upload :action="'null'">
                <Modal title="View Image" v-model="visible" :width="wid">
                  <img :src="imgUrl" v-if="visible">
                </Modal>
                <Modal title="View Image" v-model="visible1" :width="wid">
                  <img :src="imgUrl" v-if="visible1" :width ="wid1">
                </Modal>

              </Upload>
            </div>
          </div>
        </Card>
      </div>
    </div>

    <Modal
      title="确认"
      v-model="bloc.Editsymbol"
      class-name="vertical-center-modal"
    >

      <div style="text-align: center">
        请注意修改该维保申请的设备型号将直接改变该序列号对应的设备型号。请确认是否同步修改该用户所有关于此序列号的维修订单
      </div>
      <div slot="footer">
        <Button
          type="primary"
          @click="save(2)"
        >否</Button>
        <Button
        type="primary"
        @click="save(1)"
      >是</Button>
      </div>
    </Modal>
  </div>
</template>

<script lang="ts">
    import {Component, Vue} from 'vue-property-decorator';
    import {store} from '@/store/Store';
    import {Route} from 'vue-router';
    import {MaintainBloc} from './DetailBloc';
    import {deepAssign} from '@/base/util/Objects';
    import FaultSelector from '@/component/FaultSelector.vue';
    import {isEmpty} from '@/base/util/Strings';
    const columns1 = (bloc: MaintainBloc) => [
        {
            title: '配件名称',
            key: 'PartName',
            align: 'left',
            minWidth: 220,
            tooltip: true
        },
        {
            title: '单价(元)',
            key: 'UnitPrice',
            align: 'left',
            minWidth: 220,
            tooltip: true
        },
        {
            title: '数量',
            key: 'Quantity',
            align: 'left',
            minWidth: 100,
            tooltip: true
        }
    ];

    @Component({
        components: {FaultSelector}
    })

    export default class extends Vue {
        beforeRouteEnter(to: Route, from: Route, next: (vm: any) => void) {
            next(vm => {
                vm.bloc.i = vm.idx;
                if (vm.bloc.i) {
                    vm.bloc.load(vm.bloc.model.id, vm.bloc.model.aid);
                    // 如果分配id为null,不再调用maintenanceDetailAPi,防止在控制台上报错
                    if (vm.bloc.model.allocateid) {
                        vm.bloc.loadRecord(vm.bloc.model.allocateid).catch(
                            // eslint-disable-next-line handle-callback-err
                            err => {
                                vm.bloc.numRecord1 = 0;
                                vm.bloc.numRecord2 = 0;
                            }
                        );
                    } else {
                        vm.bloc.numRecord1 = 0;
                        vm.bloc.numRecord2 = 0;
                    }
                    vm.bloc.getAllModel(1, 1000, undefined, 'DESC', undefined);
                } else {
                    vm.$Message.error('操作错误');
                }
            });
        }
        get idx() {
            let routeParams = {};
            Object.keys(this.$route.query).forEach(item => {
                    routeParams[item] = this.$route.query[item];
                    let jsonMaintain = JSON.parse(routeParams[item]);
                    deepAssign(this.bloc.model, jsonMaintain);
                    if (this.bloc.model.ProModel) {
                        this.bloc.model.PM = this.bloc.model.ProModel;
                    }
                    this.bloc.OriginPM = this.bloc.model.PM;
                    this.bloc.OriginSN = this.bloc.model.SN;
             });
            return true;
        }

        bloc = new MaintainBloc();
        columns1 = columns1(this.bloc);
        selectType: any = 0;
        get uploadHeaders() {
            return {
                'Authorization': 'Bearer ' + store.state.auth.accessToken
            }
        };

        imgUrl = '';
        wid = 1000;
        wid1= 2000;
        videoUrl = '';
        visible = false;
        visible1 = false;
        get fileList() {
            return this.bloc.fileList.map(x => {
                return {'name': 'name', 'imageurl': x, 'status1': 'finished'};
            });
        }
        get fileListRecord() {
            return this.bloc.fileListRecord.map(x => {
                return {'name': x[0], 'imageurl': x[1], 'status1': 'finished'};
            });
        }
        get fileListRecord2() {
            return this.bloc.fileListRecord.map(x => {
                return {'name': 'name', 'imageurl': x, 'status1': 'finished'};
            });
        }
        get videoList() {
            return this.bloc.videoList.map(x => {
                return {'name': 'name', 'videourl': x, 'status1': 'finished'};
            });
        }
        get videoListRecord() {
            return this.bloc.videoListRecord.map(x => {
                return {'name': x[0], 'videourl': x[1], 'status1': 'finished'};
            });
        }
        handleView(url) {
            let iii = new Image();
            iii.src = url;
            this.wid = iii.width + 32;
            if (this.wid > 1300) {
             this.wid = 1300;
             this.wid1 = 1300 - 32;
             this.imgUrl = url;
             this.visible1 = true;
            } else {
              this.imgUrl = url;
              this.visible = true;
            }
        }
        ind(item, index) {
            return index;
        }

        ruleValidate3: any = {
        };
        get uploadAction() {
            return 'null'
        }
        handleFormatError1(file) {
            this.$Message.error('请选择格式为JPG、PNG、GIF格式的文件')
        }

        handleMaxSize1(file) {
            this.$Message.error('图片大小不能超过2M')
        }

        labelChange(val, arr) {
            arr.map(item => {
              item.children.map(i => {
                  if (i.label.includes('其它')) {
                      this.bloc.WatchList.push(parseInt(i.value));
                  }
              })
            });// 0:"1",1:"1"表示1大类1小类
            this.bloc.num = 0;
            this.bloc.faultSelected = val.map(
                item => {
                    // console.log(this.bloc.WatchList.includes(parseInt(item[1])));
                    if (this.bloc.WatchList.includes(parseInt(item[1]))) {
                        this.bloc.num += 1;
                        if (!this.bloc.loading) {
                            this.bloc.loading = true;
                        }
                    }
                    return item[1];
                }).join(',');
        }
        addModel() {
            // console.log(this.bloc.faultSelected);
            let contain = this.bloc.AddSelectOption.includes('，');
            let commaCount = this.bloc.AddSelectOption.split(',').filter(Boolean).length;
            if (contain) {
                this.$Message.error('不能含有中文逗号');
            } else if (commaCount !== this.bloc.num) {
                this.$Message.error('输入的值与选择的故障数量不匹配');
            } else if (
                this.bloc.model.PM !== this.bloc.OriginPM ||
                this.bloc.model.SN !== this.bloc.OriginSN
            ) {
               this.bloc.Editsymbol = true;
            } else {
                this.save(0);
            }
        }
        save(num) {
            this.bloc.Editsymbol = false;
            this.bloc.save(this.bloc.model.id, this.bloc.faultSelected, this.bloc.AddSelectOption, num).then(res => {
                this.bloc.OriginPM = this.bloc.model.PM;
                this.bloc.OriginSN = this.bloc.model.SN;
                this.$Message.success('保存成功');
            }).catch(err => {
                // this.$Message.error('保存失败');
                this.$Message.error(err.message);
            });
        }
    }
</script>

<style lang="less" scoped>
  /deep/ .ivu-form-item-content {
    display: flex !important;
    justify-content: start !important;
    align-items: center !important;
  }
  /deep/ .ivu-form-item-label {
    padding-top: 0;
  }
  /deep/ .label-right .ivu-input {
    padding-left: 3.5em;
  }
  /deep/ .label-left1 .ivu-input {
    text-indent: 8.5%;
    border: none;
  }
  .form-page .ivu-card {
    height: auto;
  }
 .label-left{
   width: 10%;float: left; border: 1px #ECEFF4 solid;background-color: #f2f2f2;
   line-height: 40px;
  }
  .label-left1{
    width: 40%;float: left; border: 1px #ECEFF4 solid;
    line-height: 40px;text-indent: 4em;
    text-align: left;
  }
  .label-right{
    width: 40%;float: right;border: 1px #ECEFF4 solid;line-height: 40px;text-indent: 4em;
    text-align: left;
  }
  .label-right-input{
    width: 40%;float: right;border: 1px #ECEFF4 solid;line-height: 40px;
    text-align: left;
  }
  /deep/ .label-right-input .ivu-input{
    text-indent: 3em;
  }
  .label-left-text{
    width: 10%;float: left; border: 1px #ECEFF4 solid;background-color: #f2f2f2;
    line-height: 90px;
  }
  .label-right-text{
    width: 90%;float: right;border: 1px #ECEFF4 solid;height: 40px;
    text-align: left;overflow:auto;display: flex;justify-content: left;
    align-items: center;
  }
  .label-right-text p{
    text-indent: 4em;
    text-align: left;
    display: inline-block;
  }
  .label-left2{
    width: 10%;float: left; border: 1px #ECEFF4 solid;background-color: #f2f2f2;
    line-height: 90px;
  }
  .label-right-text2{
    width: 90%;float: right;border: 1px #ECEFF4 solid;height: 90px;
    text-align: left;overflow:auto;display: flex;justify-content: left;
    align-items: center;
  }
  .label-right-text2 p{
    text-indent: 7em;
    text-align: left;
    display: inline-block;
  }
  .demo-upload-list{
    height:300px;
    width:400px
  }
  .nav {
    height: 50px;
    line-height: 50px;
    border-bottom: 1px solid rgba(204, 204, 204, 1);
    display: flex;
    justify-content: flex-start;

    h3 {
      padding: 0 20px;
      cursor: pointer;
    }

    .active {
      border-bottom: 1px solid #559df9;
      color: #559df9;
    }
  }
</style>
